<template>
    <div>
        <div class="container">
            <headMenu />
            <a-card class="general-card" :title="$t(menusName) + '集'">

                <a-image v-for="(file, index) in files"
                    :src='file.indexOf("img") != -1 ? "/api/" + file : "/api/img/file.png"'
                    :preview="file.indexOf('img') != -1" style="margin-left:10vh;margin-top: 5vh;"
                    :title='file.substr(file.lastIndexOf("/") + 1, file.length)'
                    :description='file.indexOf("img") != -1 ? "图片" : "文件"' width="200" footer-position="outer"
                    :preview-visible="visible2" @preview-visible-change="() => { visible2 = false }">
                    <template #extra>
                        <div class="actions actions-outer">

                            <span class="action">
                                <a-popconfirm @ok="deleteFile(file)" content="Are you sure you want to delete?">
                                    <icon-delete />
                                </a-popconfirm>
                            </span>

                            <a-tooltip v-if="file.indexOf('img') == -1 " content="点击进行在线预览文件">
                                <span class="action">
                                    <icon-eye size="20"  @click="ylOnclick(file)" />
                                </span>
                            </a-tooltip>
                
                        </div>
                    </template>
                </a-image>





            </a-card>
        </div>
    </div>
</template>
<script>
import headMenu from '@/components/headMenu/headMenu.vue';
import  url from '@/config/file-view'
import api from '@/api/sys/files'
export default {
    components: { headMenu },
    data() {
        return {
            visible2:false,
            files: [],
            menusName: this.$router.currentRoute.value.meta.locale,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        ylOnclick(file){
            console.log(url.getUrl());
            if(file.indexOf('img') != -1 ){
                open(`/api/${file}`)
            }else{
                open(`/api/file/preview?suffix=docx&url=${url.getUrl()}${file}`)
            }
            //preview?suffix=docx&url=http://localhost:8889/object/file/word.docx
        },
        getList() {
            api.list().then(res => {
                this.files = res.data.data.data;
            })
        },
        deleteFile(file) {
            api.delete(file).then(res => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('删除成功!');
                    this.getList()
                } else {
                    this.$notification.error('删除失败!');
                }
            })
        }
    }
}
</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
    &:last-child {
        .arco-table-th-item-title {
            margin-left: 16px;
        }
    }
}

.actions {
    display: flex;
    align-items: center;
}

.action {
    padding: 5px 4px;
    font-size: 14px;
    margin-left: 12px;
    border-radius: 2px;
    line-height: 1;
    cursor: pointer;
}

.action:first-child {
    margin-left: 0;
}

.action:hover {
    background: rgba(0, 0, 0, .5);
}

.actions-outer {
    .action {
        &:hover {
            color: #ffffff;
        }
    }
}
</style>
